<template>
    <div :style="{'--themescolor': themes.color}">
        <div class="popup-hide" :class="{ show: show }" @click.stop>
            <div class="popup-box">
                <div class="popup-tit">
                    <em class="tit">您修改了配送地址，是否切换</em>
                    <i class="close close-pop" @click="closeAll"></i>
                </div>
                <div class="popup-con promotion-msg">
                    <div class="font-14" v-for="(item,index) in newList" :key='index' @click="choiceAdd(index)">
                        <div class="mb-2 flex-between">
                            <!-- <img class="v-middle" style="width: 14px;" src="../../../assets/style-images/local-black.png" alt=""> -->
                            <div>{{item.subAdds}}</div>
							<div class="flex-none" style="height: 18px;">
								<span v-if="item.checkout" class="icon iconfont icondanxuan text-main" style="font-size: 18px;"></span>
								<span v-else class="choose"></span>
							</div>
                        </div>
                        
                    </div>
                </div>
                <div class="flex-center">
					<button class="popup-btn" @click="change(false)">取消</button>
					<button class="popup-btn bg-main" @click="change(true)">切换</button>
				</div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    props: {
        list: Array
    },
    data() {
        return {
            show: false,
			index: 0,
            newList:[]
        };
    },
    computed: {
        ...mapState(['themes']),
    },
    watch: {
		list: {
			immediate: true,
			handler:function(val) {
				// 监听如果没有 checkout 属性就加上
				if(val && val.length && !val[0].checkout){
					val.forEach((val,index) => {
						// 默认第一个为选中
						val.checkout = index === 0 ? true : false
						this.newList.push(val)
					})
				}
			}
		}
	},
    mounted() {},
    methods: {
        change(val) {
			this.show = false
			this.$emit('change', val ? this.newList[this.index]: '')
		},
        closeAll() {
            this.show = false;
        },
        choiceAdd(index){
			if(this.newList[index].checkout) {
				return false
			}
            this.newList.forEach((val,listIndex) => {
				val.checkout = listIndex === index ? true : false
				this.$set(this.newList,listIndex,val)
			})
			this.index = index
        },
    }
};
</script>
<style src="@/assets/css/detail.css"></style>
<style src="@/assets/css/popup.css"></style>
<style lang="stylus" scoped>
.choose {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: top;
  background-image: url(/images/choose.png);
  background-size: 18px;
  cursor: pointer;
}
</style>
